<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-01 16:17:44"
-->
<template>
  <v-list-item>
    <v-list-item-avatar>
      <v-img :src="item.wx_info.headimgurl"></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
      <v-list-item-title>{{item.wx_info.nickname}}{{ item.remark === null ? '' : '(' + item.remark + ')'}}</v-list-item-title>
      <!-- <v-list-item-subtitle>
      </v-list-item-subtitle> -->
      <MemberTagsSelect v-bind.sync="item"/>
    </v-list-item-content>
    <v-list-item-action>
      <v-btn-toggle dense>
        <v-menu offset-y v-model="remarkMenu" :close-on-content-click="false">
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" small>修改备注</v-btn>
        </template>
        <v-card>
          <v-card-title>修改备注</v-card-title>
          <v-card-text>
            <v-text-field :loading="remarkLoading" required v-model="item.remark" placeholder="输入备注信息"></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary" @click="remarkHandle">确定</v-btn>
            <v-btn @click="remarkMenu = false">取消</v-btn>
          </v-card-actions>
        </v-card>
        </v-menu>
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-btn v-on="on" icon small><v-icon>keyboard_arrow_down</v-icon> </v-btn>
          </template>
          <v-list dense flat class="py-0">
            <v-list-item dense  class="px-0">
              <v-list-item-title>
                <v-btn text small @click="blockHandle" v-if="item.block === 'no'">加入黑名单</v-btn>
                <v-btn text small @click="unblockHandle" v-else>取消黑名单</v-btn>
              </v-list-item-title>
            </v-list-item>
          </v-list>
      </v-menu>
    </v-btn-toggle>
    </v-list-item-action>
  </v-list-item>
</template>
<script>
import { remark, block, unblock } from '@/api/admin/wx-member.js'
import MemberTagsSelect from './MemberTagsSelect.vue'
export default {
  name: 'WxMemberItem',
  components: { MemberTagsSelect },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data: function () {
    return {
      // remark: '',
      remarkMenu: false,
      remarkLoading: false
    }
  },
  created: function () {

  },
  computed: {},
  methods: {
    remarkHandle: function() {
      this.remarkLoading = true
      remark(this.item.wx_openid, this.item.remark).then(res => {
        this.$toasted.success(res.data)
        this.remarkMenu = false
      }).finally(() => {
        this.remarkLoading = false
      })
    },
    blockHandle: function() {
      block([this.item.wx_openid]).then(res => {
        this.$toasted.success(res.data)
      })
    },
    unblockHandle: function() {
      unblock([this.item.wx_openid]).then(res => {
        this.$toasted.success(res.data)
      })
    }
  }
}
</script>
<style scoped>
</style>
